<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="order_table">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input
              v-model="order_queryInfo.query"
              placeholder="请输入内容"
              class="order_search_input"
              clearable
              @clear="getOrderList"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                class="order_search_button"
                @click="getOrderList"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <!--                        <el-button type="primary" class="order_add_button" @click="order_add_dialogVisible=true">添加订单</el-button>-->
          </el-col>
        </el-row>
        <template>
          <el-table :data="order_tableDate" border stripe style="width: 100%">
            <el-table-column type="index"> </el-table-column>
            <el-table-column prop="indentId" label="订单ID"> </el-table-column>
            <el-table-column prop="indentIndextCode" label="订单编号">
            </el-table-column>
            <el-table-column prop="indenPrice" label="订单价格">
            </el-table-column>
            <el-table-column prop="indentOrderTime" label="创建时间">
              <template slot-scope="scope">
                {{ new Date(scope.row.indentOrderTime).toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="indentOrderTime" label="更新时间">
              <template slot-scope="scope">
                {{ new Date(scope.row.indentOrderTime).toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="indentState" label="状态"> </el-table-column>
            <el-table-column prop="order_set" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="mini"
                  @click="showEditMessage(scope.row.indentId)"
                ></el-button>
                <el-tooltip
                  effect="dark"
                  content="查看物流信息"
                  placement="top"
                  :enterable="false"
                >
                  <el-button
                    type="warning"
                    icon="el-icon-location"
                    size="mini"
                    @click="showGpsMessage(scope.row.indentId)"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="order_queryInfo.pagenum"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="order_queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="order_pageTotal"
            :enterable="false"
          >
          </el-pagination>
        </template>
        <el-dialog
          title="提示"
          :visible.sync="order_add_dialogVisible"
          width="50%"
          @close="closeAddDialog"
        >
          <el-form
            :model="order_addForm"
            status-icon
            :rules="order_addFormRules"
            ref="order_addFormRef"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="订单号" prop="order_number">
              <el-input
                v-model="order_addForm.order_number"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单价格" prop="order_price">
              <el-input
                v-model="order_addForm.order_price"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单状态" prop="pay_status">
              <el-input v-model="order_addForm.pay_status"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="order_add_dialogVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="submitAddForm">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog
          title="提示"
          :visible.sync="order_update_dialogVisible"
          width="50%"
          @close="closeUpdateDialog"
          :close-on-click-modal="false"
        >
          <el-form
            :model="order_updateForm"
            status-icon
            :rules="order_updateFormRules"
            ref="order_updateFormRef"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="订单号" prop="order_number">
              <el-input
                v-model="order_updateForm.indentIndextCode"
                autocomplete="off"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单价格" prop="order_price">
              <el-input v-model="order_updateForm.indenPrice"></el-input>
            </el-form-item>
            <el-form-item label="订单状态" prop="pay_status">
              <el-input v-model="order_updateForm.indentState"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="order_update_dialogVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="submitUpdateForm"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <el-dialog
          title="提示"
          :visible.sync="order_delete_dialogVisible"
          width="30%"
        >
          <span>你确定要删除用户{{ this.order_updateForm.ordername }}吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="order_delete_dialogVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="deleteOrder">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog
          title="查看物流信息"
          :visible.sync="gps_dialogVisible"
          width="40%"
        >
          <el-timeline :reverse="true">
            <el-timeline-item
              placement="top"
              type="success"
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.time"
            >
              {{ activity.context }}
            </el-timeline-item>
          </el-timeline>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  created() {
    this.getOrderList()
  },
  data() {
    return {
      order_tableDate: [],
      order_queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 5,
      },
      gps_dialogVisible: false,
      activities: [],
      order_pageTotal: 0,
      order_add_dialogVisible: false, //添加用户对话框
      order_update_dialogVisible: false, //修改用户信息对话框
      order_delete_dialogVisible: false, //删除用户对话框
      order_addForm: {
        order_number: '',
        order_price: '',
        pay_status: '',
      },
      order_updateForm: {
        indentIndextCode: '',
        indenPrice: '',
        indentState: '',
      },
      order_addFormRules: {
        order_number: [
          {
            required: true,
            message: '请输入商品编号',
            trigger: 'blur',
          },
        ],
        order_price: [
          {
            required: true,
            message: '请输入商品价格',
            trigger: 'blur',
          },
        ],
        pay_status: [
          {
            required: true,
            message: '请输入商品状态',
            trigger: 'blur',
          },
        ],
      },
      order_updateFormRules: {
        indentIndextCode: [
          {
            required: true,
            message: '请输入商品编号',
            trigger: 'blur',
          },
        ],
        indenPrice: [
          {
            required: true,
            message: '请输入商品价格',
            trigger: 'blur',
          },
        ],
        indentState: [
          {
            required: true,
            message: '请输入商品状态',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    async getOrderList() {
      const { data: result } = await this.$http.get(
        'https://localhost:44379/api/IndentOrder/GetOrderData',
        {
          params: {
            OrderNo: this.order_queryInfo.query,
            pageSize: this.order_queryInfo.pagesize,
            pageIndex: this.order_queryInfo.pagenum,
          },
        }
      )
      console.log(result.data, 'iomkmkmk')
      console.log(result.msg, 'iomkmkmk')
      if (result.msg.status != '200') {
        this.$message.error(result.msg.msg)
      }
      this.order_pageTotal = result.data.count
      this.order_tableDate = result.data.data
      this.$message.success(result.meta.msg)
    },
    handleSizeChange(val) {
      //切换每页显示多少条
      //console.log(`每页 ${val} 条`);
      this.order_queryInfo.pagesize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      //切换当前页数
      //console.log(`当前页: ${val}`);
      this.order_queryInfo.pagenum = val
      this.getOrderList()
    },
    //添加用户
    submitAddForm() {
      this.$refs['order_addFormRef'].validate(async (valid) => {
        if (valid) {
          const { data: result } = await this.$http.post(
            'orders',
            this.order_addForm
          )
          if (result.meta.status == 201) {
            this.$message.success(result.meta.msg)
            this.closeAddDialog()
            this.getOrderList()
          } else {
            this.$message.error(result.meta.msg)
          }
        } else {
          return false
        }
      })
    },
    //重置添加用户表单
    closeAddDialog() {
      this.order_add_dialogVisible = false
      this.$refs['order_addFormRef'].resetFields()
    },
    //为修改栏提供默认用户信息
    async showEditMessage(id) {
        console.log(id,",,lmm,mm,mmmmm");
      const { data: result } = await this.$http.get(
        `https://localhost:44379/api/IndentOrder/GetIndentData`,{
            params:{
                Order:id
            }
        }
      )
      this.order_updateForm = result.data
      this.order_update_dialogVisible = true
    },
    //查看物流信息
    showGpsMessage(id) {
      const result = {
        data: [
          {
            time: '2018-05-10 09:39:00',
            ftime: '2018-05-10 09:39:00',
            context: '已签收,感谢使用顺丰,期待再次为您服务',
            location: '',
          },
          {
            time: '2018-05-10 08:23:00',
            ftime: '2018-05-10 08:23:00',
            context:
              '[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件',
            location: '',
          },
          {
            time: '2018-05-10 07:32:00',
            ftime: '2018-05-10 07:32:00',
            context: '快件到达 [北京海淀育新小区营业点]',
            location: '',
          },
          {
            time: '2018-05-10 02:03:00',
            ftime: '2018-05-10 02:03:00',
            context:
              '快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]',
            location: '',
          },
          {
            time: '2018-05-09 23:05:00',
            ftime: '2018-05-09 23:05:00',
            context: '快件到达 [北京顺义集散中心]',
            location: '',
          },
          {
            time: '2018-05-09 21:21:00',
            ftime: '2018-05-09 21:21:00',
            context: '快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]',
            location: '',
          },
          {
            time: '2018-05-09 13:07:00',
            ftime: '2018-05-09 13:07:00',
            context: '顺丰速运 已收取快件',
            location: '',
          },
          {
            time: '2018-05-09 12:25:03',
            ftime: '2018-05-09 12:25:03',
            context: '卖家发货',
            location: '',
          },
          {
            time: '2018-05-09 12:22:24',
            ftime: '2018-05-09 12:22:24',
            context: '您的订单将由HLA（北京海淀区清河中街店）门店安排发货。',
            location: '',
          },
          {
            time: '2018-05-08 21:36:04',
            ftime: '2018-05-08 21:36:04',
            context: '商品已经下单',
            location: '',
          },
        ],
        meta: { status: 200, message: '获取物流信息成功！' },
      }
      if (result.meta.status == 200) {
        console.log(result.data)
        this.activities = result.data
        this.$message.success(result.meta.message)
        this.gps_dialogVisible = true
      } else {
        this.$message.error(result.meta.message)
      }
    },
    //提交更新用户信息
    submitUpdateForm() {
      this.$refs['order_updateFormRef'].validate(async (valid) => {
        if (valid) {
          const { data: result } = await this.$http.post(
            `https://localhost:44379/api/IndentOrder/Update`,
             this.$qs.stringify({
                Oroid: this.order_updateForm.indentIndextCode,
                StateNum: this.order_updateForm.indentState,
                money: this.order_updateForm.indenPrice,
              })
          )
          if (result.status == 1) {
            this.$message.success(result.msg)
            this.closeUpdateDialog()
            this.getOrderList()
          } else {
            this.$message.error(result.msg)
          }
        } else {
          return false
        }
      })
    },
    //重置修改用户表单
    closeUpdateDialog() {
      this.order_update_dialogVisible = false
      this.$refs['order_updateFormRef'].resetFields()
    },
    async deleteOrder() {
      const { data: result } = await this.$http.delete(
        `orders/${this.order_updateForm.order_id}`
      )
      if (result.meta.status == 200) {
        this.$message.success(result.meta.msg)
        this.order_delete_dialogVisible = false
        this.getOrderList()
      } else {
        this.$message.error(result.meta.msg)
      }
    },
  },
}
</script>
<style lang="less" scoped>
.order_table {
  .order_table_header {
    .order_search_input {
      width: 30%;
      float: left;
    }
    .order_search_button {
      background-color: #dcdfe6;
      box-shadow: 0 0 10px #ddd; //加阴影，向外扩散10像素
      float: left;
      width: 6%;
    }
    .order_add_button {
      width: 10%;
      padding-left: 20px;
      float: left;
    }
  }
}
</style>